<template>
  <ly-dialog
    v-model="visible"
    title="进账统计--明细"
    :width="'80%'"
    close-on-click-modal
    :top="'2vh'"
    :show-confirm-cancel-button="false"
    :before-close="() => {$emit('update:visible', false)}"
    @open="handleOpen"
  >
    <ly-form
      size="mini"
      class="mini-form"
      style="width:100%"
      :model="temp"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="日期">
            <el-date-picker
              v-model="temp.dateOrderRange"
              type="monthrange"
              align="right"
              format="yyyy-MM"
              value-format="yyyy-MM"
              range-separator="~"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :clearable="false"
              :picker-options="pickerOptions"
              @change="handleChange($event,'date')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="类型">
            <el-select
              v-model="temp.amountTrend"
              placeholder="请选择"
              @change="handleChange($event,'line')"
            >
              <el-option
                v-for="item in amountType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label-width="40px">
            <el-checkbox v-model="temp.checked" @change="handleChange($event,'check')">进账</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </ly-form>
    <el-row style="background:#fff;padding:0px 16px 0;">
      <div class="chat_line">
        <div style="color:red;">{{ moneyData }}</div>
      </div>
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row style="background:#fff;padding:0px 16px 0;">
      <el-col :span="15">
        <bar-chart :chart-data="lineChartData" />
      </el-col>
      <el-col :span="8">
        <pie-chart :chart-data="pieChartData" />
      </el-col>
    </el-row>
  </ly-dialog>
</template>

<script>
import moment from 'moment'
import LineChart from './LineChart'
import BarChart from './BarChart'
import PieChart from './PieChart'
import { mapState } from 'vuex'
import { getList } from '@/api/statistics'
import { getBasisList } from '@/api/basic-data'
import { getConstantByType } from '@/utils/index'

export default {
  name: 'StatisticsDialog',
  components: {
    LineChart,
    BarChart,
    PieChart
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      temp: {
        amountTrend: '00',
        endDate: '',
        beginDate: '',
        checked: true,
        dateOrderRange: []
      },
      restTemp: {
        amountTrend: '00',
        endDate: '',
        beginDate: '',
        checked: true,
        dateOrderRange: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      amountType: [],
      moneyData: [],
      lineChartData: {},
      barChartData: {},
      pieChartData: {},
      visibleDialog: false
    }
  },
  computed: {
    ...mapState('app', {
      commonLayoutHeight: state => state.height.clientHeight - 190
    })
  },
  watch: {
  },
  methods: {
    handleOpen() {
      this.temp = Object.assign({}, this.restTemp)
      if (this.data.beginDate) {
        const beginDate = this.data.beginDate
        const endDate = this.data.endDate
        this.temp.beginDate = beginDate
        this.temp.endDate = endDate
        this.temp.dateOrderRange = [beginDate, endDate]
      } else {
        const beginDate = moment().format('YYYY-MM').toString() + '-01' // 今年的1月
        const endDate = moment().format('YYYY-MM').toString() + '-12' // 今年的12月
        this.temp.beginDate = moment().format('YYYY-MM')
        this.temp.endDate = moment().format('YYYY-MM')
        this.temp.dateOrderRange = [beginDate, endDate]
      }
      this.getLine()
      this.getConstant()
      this.getPieChat()
      // this.getBarChat()
    },
    // 接口
    async getLine() {
      const params = {
        beginDate: this.temp.beginDate,
        endDate: this.temp.endDate,
        type: this.temp.amountTrend,
        sign: this.temp.checked
      }
      const result = await getList('getCreditStatisticsLine', params)
      if (result.code === 200) {
        this.lineChartData = JSON.parse(JSON.stringify(result.data.pageItems[0]))
        this.moneyData = JSON.parse(JSON.stringify(result.data.pageItems[0].moneyData.join(', ')))
      }
    },
    async getConstant() {
      const result = await getBasisList('constant')
      if (result.code === 200) {
        this.constants = JSON.parse(JSON.stringify(result.data.pageItems))
        const amountType = await getConstantByType(this.constants, 2)
        const newData = {
          'id': '00',
          'name': '总数据'
        }
        this.amountType = [newData, ...amountType]
      }
    },
    // async getBarChat() {
    //   const params = {
    //     beginDate: this.temp.beginDate,
    //     endDate: this.temp.endDate,
    //     type: this.temp.amountTrend,
    //     sign: this.temp.checked
    //   }
    //   const result = await getList('getCreditStatisticsBar', params)
    //   if (result.code === 200) {
    //     this.barChartData = JSON.parse(JSON.stringify(result.data.pageItems[0]))
    //   }
    // },
    async getPieChat() {
      const params = {
        beginDate: this.temp.beginDate,
        endDate: this.temp.endDate,
        type: this.temp.amountTrend,
        sign: this.temp.checked
      }
      const result = await getList('getCreditStatisticsPie', params)
      if (result.code === 200) {
        this.pieChartData = JSON.parse(JSON.stringify(result.data.pageItems[0]))
      }
    },
    // 查询
    handleChange(item, val) {
      if (val === 'date') {
        this.temp.beginDate = item[0]
        this.temp.endDate = item[1]
      } else if (val === 'line') {
        this.temp.amountTrend = item
      } else {
        this.temp.checked = item
      }
      this.getLine()
      this.getPieChat()
      // this.getBarChat()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 15px 20px !important;
}
  .chat_line{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 5px 0px;
  }

  .chat_lines{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
</style>
